<template>
  <div class="pr-24 py-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="卡片底色" class="mb-24">
      <ColorSetting v-model="style.backgroundColor" />
    </el-form-item>
    <el-form-item label="字体颜色" class="mb-24">
      <ColorSetting v-model="style.color" />
    </el-form-item>
    <el-form-item label="图片" class="mb-24">
      <PictureMaterialSelector :img-url.sync="config.userImg">
        <template #tip>
          <div>建议尺寸：300*300 建议大小：1M</div>
          <div class="mt-8">*注意上传透明背景</div>
        </template>
      </PictureMaterialSelector>
    </el-form-item>
    <el-form-item label="部门名称" class="mb-24">
      <el-input v-model="config.userName" maxlength="4" :show-word-limit="true"></el-input>
    </el-form-item>
    <el-form-item label="专业背景" class="mb-24">
      <div class="tag-list bgc-white bd-filt">
        <div class="d-flex mb-24">
          <div class="mr-24 t-light">优势一</div>
          <el-input v-model="config.userTagList[0]" maxlength="12" :show-word-limit="true"></el-input>
        </div>
        <div class="d-flex mb-24">
          <div class="mr-24 t-light">优势二</div>
          <el-input v-model="config.userTagList[1]" maxlength="12" :show-word-limit="true"></el-input>
        </div>
        <div class="d-flex mb-24">
          <div class="mr-24 t-light">优势三</div>
          <el-input v-model="config.userTagList[2]" maxlength="12" :show-word-limit="true"></el-input>
        </div>
        <div class="d-flex">
          <div class="mr-24 t-light">优势四</div>
          <el-input v-model="config.userTagList[3]" maxlength="12" :show-word-limit="true"></el-input>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="招新人数" class="mb-24">
      <el-input v-model="config.managerScale" maxlength="6" :show-word-limit="true"></el-input>
    </el-form-item>
    <el-form-item label="部门历史" class="mb-24">
      <el-input v-model="config.workTime" maxlength="6" :show-word-limit="true"></el-input>
    </el-form-item>
    <el-form-item label="投资理念" class="mb-24">
      <el-input v-model="config.investIdea" maxlength="5" :show-word-limit="true"></el-input>
    </el-form-item>
    <el-form-item label="重点关注" class="mb-24">
      <el-input v-model="config.focusVip" maxlength="8" :show-word-limit="true"></el-input>
    </el-form-item>
    <el-form-item label="部门介绍">
      <el-input
        v-model="config.userDesc"
        type="textarea"
        rows="5"
        maxlength="70"
        :show-word-limit="true"
        resize="none"
      />
    </el-form-item>
  </div>
</template>

<script>
  import { getHexColor } from '@/utils';
  import PictureMaterialSelector from '@/components/PictureMaterialSelector';
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';

  export default {
    components: {
      PictureMaterialSelector,
      ColorSetting
    },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },

    data() {
      return {};
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    },

    methods: {
      getHexColor
    }
  };
</script>

<style lang="scss" scoped>
  .tag-list {
    padding: 24px 24px 24px 38px;

    ::v-deep {
      .el-input {
        width: 232px;
      }
    }
  }
</style>
